<template>
	<view>
		<swiper class="mySwiper" :indicator-dots="true" :autoplay="true"  :circular="true">
			<swiper-item v-for="item of bannerList" :key="item.bannerid">
				<image :src="item.img" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 产品列表 -->
		 <uni-list>
		    <uni-list-item
			 v-for="item of proList"
			 :key="item.proid"
			 :title="item.proname" 
			 :note="item.originprice + ''" 
			 :thumb="item.img1"
		     thumb-size="lg"></uni-list-item>
		</uni-list>
		<view class="backTop" v-if="flag" @click="backtop">
		  <icon class="backTopIcon" type="download" size="36"></icon>
		</view>
	</view>
</template>

<script>
	import { getBannerList, getProList } from '../../api/home.js'
	export default {
		data() {
			return {
	    	bannerList: [],
				proList: [],
				count: 2,
				flag: false
			};
		},
		methods: {
			backtop () {
				uni.pageScrollTo({
				  scrollTop: 0,
				  duration: 300
				})
			  }
		},
		mounted () {
			getBannerList().then(res => {
				this.bannerList = res.data.data
			})
			getProList().then(res => {
				this.proList = res.data.data
			})
		},
		onPullDownRefresh () {
			getProList().then(res => {
				this.proList = res.data.data
				this.count = 2
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom () {
			getProList({ count: this.count }).then(res => {
				if (res.data.data.length === 0) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					})
				} else {
					this.proList = [...this.proList, ...res.data.data]
					this.count++
				}
			})
		},
		onPageScroll ({ scrollTop }) {
		      this.flag= scrollTop > 300
		  },
	}
</script>

<style lang="scss">
.mySwiper {
	height: 180px;
	image {
		width: 100%;
	}
}
.backTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  /* #ifdef H5 */
  bottom: 60px;
  /* #endif */
}
.backTopIcon {
  transform: rotate(180deg);
}
</style>
